
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>DataType.Number.format()</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
/* custom styles for this example */
#demo label {display:block;}
#demo fieldset {margin:1em;}
#demo .short label, #demo .medium label {display:inline;}
#demo .short input {width:2em;}
#demo .medium input {width:5em;}
</style>

<!--end custom header content for this example-->

</head>

<body class=" yui-skin-sam">

<h1>DataType.Number.format()</h1>

<div class="exampleIntro">
	The Number module of the DataType Utility allows you to take a number and format it into a string with the following configuration parameters: <code>decimalPlaces</code>, <code>decimalSeparator</code>, <code>thousandsSeparator</code>, <code>prefix</code>, and <code>suffix</code>.
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<form id="demo">
    <fieldset>
        <label for="demo_number">Number to format: <input type="text" id="demo_number"></label>
    </fieldset>
    <fieldset class="short">
        <label for="demo_thousandsSeparator">Thousands separator: <input type="text" id="demo_thousandsSeparator"></label>
        <label for="demo_decimalSeparator">Decimal separator: <input type="text" id="demo_decimalSeparator"></label>
        <label for="demo_decimalPlaces">Decimal places: <input type="text" id="demo_decimalPlaces"></label>
    </fieldset>
    <fieldset class="medium">
        <label for="demo_prefix">Prefix: <input type="text" id="demo_prefix"></label>
        <label for="demo_suffix">Suffix: <input type="text" id="demo_suffix"></label>
    </fieldset>
    <fieldset>
        <input type="button" id="demo_btn" value="Show formatted string">: <span id="demo_output"></span>
    </fieldset>
</form>



<script type="text/javascript">
YUI({base:"../../build/", timeout: 10000}).use("node", "datatype-number", function (Y) {
    Y.on("click", function(e){
        var number = Y.DataType.Number.parse(Y.get("#demo_number").get("value")),
            output = Y.DataType.Number.format(number, {
                    prefix: Y.get("#demo_prefix").get("value"),
                    thousandsSeparator: Y.get("#demo_thousandsSeparator").get("value"),
                    decimalSeparator:Y.get("#demo_decimalSeparator").get("value"),
                    decimalPlaces: Y.DataType.Number.parse(Y.get("#demo_decimalPlaces").get("value")),
                    suffix: Y.get("#demo_suffix").get("value")
                });
                
        if(output === "") {
            output += "(Invalid number)"
        }
        Y.get("#demo_output").setContent(output);
    }, "#demo_btn");
});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
